<template>
  <div class="stock-check">
    <div class="stock-check__tabs">
      <div>
        <n-tabs type="line" @update:value="onChangeTab">
          <n-tab name="1">
            盘点
          </n-tab>
          <n-tab name="2">
            盘点记录
          </n-tab>
        </n-tabs>
      </div>
    </div>
    <div class="stock-check__content" v-if="tabIndex === 1">
      <div class="c-query">
        <div class="q-left">
          <span>产品搜索</span>
          <n-select filterable placeholder="请输入产品款号" clearable remote />
          <button>添加</button>
        </div>
        <div class="q-right">
          <div>实际库存</div>
          <div>修改后库存</div>
        </div>
      </div>
      <div class="c-goods-item">
        <div class="c-goods-item_header">
          <div class="h_left">
            <p class="h_left--name">b1-23带腿带袖体雕衣</p>
            <p class="h_left--alias">b1-23带腿带袖体雕衣</p>
          </div>
          <div class="h_right">
            <div class="h_right__item">
              数量：6件
            </div>
          </div>
        </div>
        <stock-table isInput afterColor :list="['',
      { value: 'A', },
      { value: 'B', },
      { value: 'C', },
      { value: '紫色', },
      { value: 1, change: true },
      { value: 2, change: true },
      { value: 3, change: true },
      { value: '肤色', },
      { value: 4, change: true },
      { value: 5, change: true },
      { value: 6, change: true },
      { value: '黑色', },
      { value: 7, change: true },
      { value: 8, change: true },
      { value: 9, change: true }]"></stock-table>
      </div>

    </div>
    <div class="stock-check__content" v-if="tabIndex === 2">
      <div class="c-time">
        <span>选择日期</span>
        <n-date-picker type="daterange" clearable />
        <button>重置</button>
      </div>
      <n-data-table bordered :columns="columns" :data="list" striped :scroll-x="1800" :max-height="'39.5vh'" />
    </div>
    <div class="stock-check__footer">
      <div class="stock-check__footer-action" v-show="tabIndex === 1">
        <button class="a-btn a-btn--reset" :class="{ 'a-btn--active': false }" @click="handleReset">清零库存</button>
        <button class="a-btn a-btn--cancel" :class="{ 'a-btn--active': false }" @click="handleCancel">取消盘点</button>
        <button class="a-btn a-btn--confirm" :class="{ 'a-btn--active': false }" @click="handleConfirm">确认盘点</button>
      </div>
      <div class="stock-check__footer-pagination" v-show="tabIndex === 2">
        <n-pagination :page-count="100" :page-slot="7">
          <template #prev>
            上一页
          </template>
          <template #next>
            下一页
          </template>
          <template #suffix>
            <div class="stock-check__footer-pagination__jump-page">
              到<input type="number">页
              <button>确定</button>
              <span>10 条 / 页</span>
            </div>
          </template>
        </n-pagination>
      </div>
    </div>
  </div>
  <info-drawer></info-drawer>
</template>

<script setup>
import { h, ref, provide, reactive } from "vue";
import { useMessage, useDialog } from "naive-ui";
import goodsRow from "../@fragment/goods-row.vue";
import stockTable from "../@fragment/stock-table.vue";
import infoDrawer from "./info.vue";

let infoDrawerActive = ref(false);
provide('infoDrawerActive', infoDrawerActive);

const columns = [
  {
    title: '编号', key: 'sn'
  },
  { title: '修改时间', key: 'time' },
  { title: '修改人', key: 'address' },
  {
    title: '操作',
    fixed: 'right',
    width: 200, 
    render () {
      return h(goodsRow, {
        details: '查看详情', onHandleDetails () {
          infoDrawerActive.value = true
        }
      })
    },
    
  }
];
const list = reactive([{
  key: 0,
  sn: 'sadasdasd',
  time: '2022-02-12',
  address: 'New York No. 1 Lake Park'
}
])

let tabIndex = ref(1);
const onChangeTab = (e) => {
  tabIndex.value = Number(e);
}

const message = useMessage();
const dialog = useDialog();
const handleReset = () => {
  dialog.warning({
    width: 600,
    title: "提示",
    content: "是否清零库存？确认后，库存数量自动恢复回实际库存数量。",
    positiveText: "确定",
    onPositiveClick: () => {
      message.success("确定");
    }
  });
}
const handleCancel = () => {
  dialog.error({
    title: "提示",
    content: "是否确认取消盘点？",
    positiveText: "确定",
    onPositiveClick: () => {
      message.success("确定");
    }
  });
}
const handleConfirm = () => {
  dialog.info({
    title: "提示",
    content: "是否确认提交盘点？",
    positiveText: "确定",
    onPositiveClick: () => {
      message.success("确定");
    }
  });
}
</script>

<style lang="less" scoped>
.stock-check {
  display: flex;
  flex-direction: column;
  height: 100%;

  * {
    line-height: 1;
  }

  &__tabs {
    > div:first-child {
      margin: 21px 30px 0;
      height: 60px;
      background: #f8f8f8;
      box-sizing: border-box;

      /deep/ .n-tabs-bar {
        height: 6px;
        border-radius: 2px;
      }
    }
  }

  &__content {
    flex: 1;
    height: 100%;
    margin-top: 30px;
    padding: 0 30px;
    box-sizing: border-box;

    .c-query {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .q-left {
        display: grid;
        grid-template-columns: auto 380px auto auto;
        align-items: center;
        justify-content: start;
        margin-bottom: 28px;

        > span {
          margin-right: 19px;
          font-size: 26px;
          color: #2e323d;
        }

        > button {
          margin-left: 18px;
          width: 114px;
          height: 60px;
          font-size: 26px;
          background: #f8f8f8;
          border: 1px solid #aaaaaa;
          border-radius: 5px;
          color: #2e323d;
        }
      }

      .q-right {
        display: flex;

        > div {
          position: relative;
          margin-left: 60px;
          font-size: 26px;
          font-weight: 500;
          color: #4a5060;

          &:nth-child(1) {
            &::before {
              position: absolute;
              left: -35px;
              content: "";
              width: 26px;
              height: 26px;
              background: #4a5060;
              border-radius: 4px;
            }
          }

          &:nth-child(2) {
            &::before {
              position: absolute;
              left: -35px;
              content: "";
              width: 26px;
              height: 26px;
              background: #1981f4;
              border-radius: 4px;
            }
          }
        }
      }
    }

    .c-goods-item {
      height: 50.5vh;
      padding: 0 1px;
      overflow-y: auto;
      box-sizing: border-box;
      &_header {
        display: flex;
        justify-content: space-between;
        margin: 30px 0;

        .h_left {
          &--name {
            margin-bottom: 10px;
            font-size: 24px;
            font-weight: 500;
            color: #2e323d;
          }

          &--alias {
            font-size: 20px;
            font-weight: 500;
            color: #4a5060;
          }
        }

        .h_right {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          height: 60px;
          padding: 0 30px;
          font-size: 24px;
          font-weight: bold;
          color: #666;
          background: #f7f7f7;
          border-radius: 5px;

          &__item {
            margin: 0 10px;
          }
        }
      }
    }

    .c-time {
      display: grid;
      grid-template-columns: auto 420px auto auto;
      align-items: center;
      justify-content: start;
      margin-bottom: 28px;

      > span {
        margin-right: 19px;
        font-size: 26px;
        color: #2e323d;
      }

      > button {
        margin-left: 18px;
        width: 114px;
        height: 60px;
        font-size: 26px;
        background: #f8f8f8;
        border: 1px solid #aaaaaa;
        border-radius: 5px;
        color: #2e323d;
      }
    }

    /deep/ td {
      vertical-align: middle;
    }
  }

  &__footer {
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 128px;
    box-sizing: border-box;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);

    &-action {
      display: flex;
      justify-content: flex-end;
      width: 100%;

      .a-btn {
        width: 220px;
        height: 68px;
        font-size: 30px;
        font-weight: 500;
        color: #fff;
        border-radius: 5px;
        opacity: 0.5;

        &--reset {
          background: #fe9900;
        }

        &--cancel {
          margin: 0 20px;
          background: #ec3f14;
        }

        &--confirm {
          background: #1981f4;
        }

        &--active {
          opacity: 1;
        }
      }
    }

    &-pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      &__jump-page {
        font-size: 26px;
        color: #4a5060;
        margin: 0 18px;

        input {
          margin: 0 15px;
          width: 64px;
          height: 42px;
          text-align: center;
          background: #f8f8f8;
          border: 1px solid #e5e5e5;
          border-radius: 5px;
        }

        button {
          margin: 0 30px;
          width: 88px;
          height: 44px;
          color: #fdfdfd;
          background: #2c8cf0;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>